<template>
  <TopNavComponent/>
  <van-dropdown-menu>
    <van-dropdown-item title="位置" ref="location">
      <div class="list" @click="onLocation">
        <h3 data-value="area" :class="[active=='area'?'active':'']">区域</h3>
        <h3 data-value="subway" :class="[active=='subway'?'active':'']">地铁</h3>
      </div>
      <div class="item">
        <van-cell-group v-if="active=='area'">
          <van-cell :value="item" v-for="(item,index) in areas" :key="index" @click="onItem(item)"/>
        </van-cell-group>
        <van-cell-group v-if="active=='subway'">
          <van-cell :value="item" v-for="(item,index) in subways" :key="index" @click="onItem(item)"/>
        </van-cell-group>
      </div>
    </van-dropdown-item>
    <van-dropdown-item title="租金" ref="price">
      <van-cell-group>
        <van-cell value="不限"/>
        <van-cell value="2000元以下" @click="onPrice('2000')"/>
        <van-cell value="2000-2500元" @click="onPrice('2500')"/>
        <van-cell value="2500元-3000元" @click="onPrice('3000')"/>
      </van-cell-group>
    </van-dropdown-item>
    <van-dropdown-item title="类型" ref="type">
      <div class="container">
        <div class="title">商铺类型</div>
        <div class="btn" v-for="(item,index) in types" :key="index" @click="onType(item)">{{ item }}</div>
      </div>
    </van-dropdown-item>
    <van-dropdown-item title="更多" ref="more">
      <div class="container">
        <div class="title">{{ mores1.title }}</div>
        <div :class="[selectBtn1==childItem?'activeBtn':'']" class="btn" v-for="(childItem,childIndex) in mores1.btns"
             :key="childIndex" @click="onMore1(childItem)">{{ childItem }}
        </div>
      </div>
      <div class="container">
        <div class="title">{{ mores2.title }}</div>
        <div :class="[selectBtn2==childItem?'activeBtn':'']" class="btn" v-for="(childItem,childIndex) in mores2.btns"
             :key="childIndex" @click="onMore2(childItem)">{{ childItem }}
        </div>
      </div>
      <div class="container btnL">
        <div class="clearBtn" @click="clearBtn ">清空筛选</div>
        <div class="sureBtn" @click="suerBtn">确认</div>
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>
  <div class="content">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="place-item" v-for="item in list" :key="item.id" @click="onPlaceItem(item.id)">
        <img :src="item.image" alt="">
        <div class="place-item-desc">
          <p>{{item.title}}</p>
          <span class="descs">{{item.descs}}</span>
          <span class="price">{{item.price}}元/月</span>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import TopNavComponent from "@/components/TopNavComponent.vue";
import {getPlaceList} from '@/api/Place/place.ts'
import {useRouter} from "vue-router";

const areas = ["不限", "东城区", "西城区", "朝阳区", "海淀区"]
const subways = ["不限", "1号线", "2号线", "3号线", "4号线"]
const types = ["不限", "商场/超市", "商业街"]
const mores1 = {
  title: "面积",
  btns: ["不限", "10m²以下", "10-50m²", "50-100m²", "100m²以上"]
}
const mores2 = {
  title: "楼层",
  btns: ["不限", "1层", "2层", "3层", "4层", "5层", "5层以上"]
}
const active = ref<string>("area")
const location = ref()
const price = ref()
const type = ref()
const more = ref()
const selectBtn1 = ref('不限')
const selectBtn2 = ref('不限')
const router=useRouter()
interface IParams {
  location: string,
  price: string,
  type: string
}

const params: IParams = reactive({
  location: "不限",
  price: "不限",
  type: "不限"
})
const onLocation = (e: any) => {
  active.value = e.target.dataset.value
}
const onItem = (item: string) => {
  params.location = item
  location.value.toggle()
}
const onPrice = (item: string) => {
  params.price = item
  price.value.toggle()
}
const onType = (item: string) => {
  params.type = item
  type.value.toggle()
}
const onMore1 = (item: string) => {
  selectBtn1.value = item
}
const onMore2 = (item: string) => {
  selectBtn2.value = item
}
const clearBtn = () => {
  selectBtn1.value = '不限'
  selectBtn2.value = '不限'
}
const suerBtn = () => {
  more.value.toggle()
}

/**
 * 列表数据
 */
interface IList {
  id: number,
  image: any,
  title: string,
  descs: string,
  price: string
}

const loading = ref(false)
const finished = ref(false)
const page = ref<number>(1)
const list = ref<IList[]>([])
const onLoad = () => {
  getPlaceList({
    page: page.value
  }).then(res => {
    if (res.status == 200) {
      page.value++
      list.value = res.data
    }
    loading.value = false
    if(res.status==500){
      finished.value = true
    }
  })
}
const onPlaceItem = (id:number)=>{
  router.push({
    name:'placeDetails',
    params:{
      id
    }
  })
}
</script>
<style scoped lang="less">
.list {
  width: 50%;
  float: left;
  background: #f3f4f5;

  h3 {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    box-sizing: border-box;

    &.active {
      background: #fff;
    }
  }
}

.item {
  width: 50%;
  float: left;
}

.container {
  background: #fff;
  overflow: hidden;

  .title {
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
  }

  .btn {
    float: left;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background: #f3f4f5;
    margin: 10px;
    text-align: center;
    font-size: 14px;
    margin-top: 0;
    border-radius: 5px;
  }
}

.btnL {
  display: flex;
  justify-content: center;

  .clearBtn {
    width: 30%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f3f4f5;
    border-radius: 5px;
    margin: 10px;
  }

  .sureBtn {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #684886;
    color: #fff;
    border-radius: 5px;
    margin: 10px;
  }
}

.activeBtn {
  background-color: #684886 !important;
  color: #fff;
}

.content {
  padding: 10px;
  background-color: #fff;

  .place-item {
    border-bottom: 1px solid #f3f4f5;
    padding: 10px 0;
    display: flex;

    img {
      width: 150px;
      border-radius: 5px;
    }

    .place-item-desc {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 10px;

      p {
        font-size: 14px;
        margin: 5px 0;
      }

      .descs {
        display: block;
        font-size: 14px;
        color: #999;
        margin: 5px 0;
      }

      .price {
        display: block;
        font-size: 14px;
        color: #ff4444;
        margin: 5px 0;
      }
    }
  }
}
</style>